<template>
	<view
		:style="'order:'+Item.order+';'"
		class="block-hashtag">
		<template v-if="list.length">
			<template v-if="Item.randomBackgroundColor">
				<view
					@click="$_To('hashtag/hashtag?hid=' + item.hid)"
					class="for"
					:style="{'background':'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'}"
					v-for="(item,index) in list">
					<text class="text" style="color: #FFF;text-shadow: 0 0 1px #000;">{{item.hname}}</text>
					<text class="digit" style="color: #FFF;text-shadow: 0 0 1px #000;">({{item.postCount}})</text>
				</view>
				<view
					v-if="Item.page"
					class="more"
					@click="clickMore">
					<text>加载更多</text>
				</view>
			</template>
			<template v-if="!Item.randomBackgroundColor">
				<view
					@click="$_To('hashtag/hashtag?hid=' + item.hid)"
					class="for"
					v-for="(item,index) in list">
					<text class="text">{{item.hname}}</text>
					<text class="digit">({{item.postCount}})</text>
				</view>
				<view
					v-if="Item.page"
					class="more"
					@click="clickMore">
					<text>加载更多</text>
				</view>
			</template>
		</template>
		<template v-else>
			<view class="more">
				<text>Loading...</text>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"block-hashtag",
		props:{
			Item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				page:2
			};
		},
		mounted(){
			this.getHashtagList();
		},
		methods:{
			getHashtagList(){
				this.$_Request(
					"GET","/api/v2/hashtag/list",
					{
						"createdDays":this.Item.query.createdDays,
						"createdDate":this.Item.query.createdDate,
						"createdDateGt":this.Item.query.createdDateGt,
						"createdDateLt":this.Item.query.createdDateLt,
						"viewCountGt":this.Item.query.viewCountGt,
						"viewCountLt":this.Item.query.viewCountLt,
						"likeCountGt":this.Item.query.likeCountGt,
						"likeCountLt":this.Item.query.likeCountLt,
						"dislikeCountGt":this.Item.query.dislikeCountGt,
						"dislikeCountLt":this.Item.query.dislikeCountLt,
						"followCountGt":this.Item.query.followCountGt,
						"followCountLt":this.Item.query.followCountLt,
						"blockCountGt":this.Item.query.blockCountGt,
						"blockCountLt":this.Item.query.blockCountLt,
						"postCountGt":this.Item.query.postCountGt,
						"postCountLt":this.Item.query.postCountLt,
						"postDigestCountGt":this.Item.query.postDigestCountGt,
						"postDigestCountLt":this.Item.query.postDigestCountLt,
						"orderType":this.Item.query.orderType,
						"orderDirection":this.Item.query.orderDirection,
						"pageSize":this.Item.query.pageSize,
						"page":1,
						"whitelistKeys":"hid,hname,postCount"
					},
					(res) => {
						this.list = deleteHid(res.data.data.list,this.Item.deleteHid)
						function deleteHid(list, ids){
							return list.filter(item => {
								const { groups } = item
								if (Array.isArray(item.groups)) {
									item.groups = deleteHid(groups, ids)
								}
								return !ids.includes(item.hname)
							})
						}
						
					}
				)
			},
			clickMore(){
				uni.showLoading({ title: "加载中" });
				this.$_Request(
					"GET","/api/v2/hashtag/list",
					{
						"createdDays":this.Item.query.createdDays,
						"createdDate":this.Item.query.createdDate,
						"createdDateGt":this.Item.query.createdDateGt,
						"createdDateLt":this.Item.query.createdDateLt,
						"viewCountGt":this.Item.query.viewCountGt,
						"viewCountLt":this.Item.query.viewCountLt,
						"likeCountGt":this.Item.query.likeCountGt,
						"likeCountLt":this.Item.query.likeCountLt,
						"dislikeCountGt":this.Item.query.dislikeCountGt,
						"dislikeCountLt":this.Item.query.dislikeCountLt,
						"followCountGt":this.Item.query.followCountGt,
						"followCountLt":this.Item.query.followCountLt,
						"blockCountGt":this.Item.query.blockCountGt,
						"blockCountLt":this.Item.query.blockCountLt,
						"postCountGt":this.Item.query.postCountGt,
						"postCountLt":this.Item.query.postCountLt,
						"postDigestCountGt":this.Item.query.postDigestCountGt,
						"postDigestCountLt":this.Item.query.postDigestCountLt,
						"orderType":this.Item.query.orderType,
						"orderDirection":this.Item.query.orderDirection,
						"pageSize":this.Item.query.pageSize,
						"page":this.page,
						"whitelistKeys":"hid,hname,postCount"
					},
					(res) => {
						if(res.data.data.list.length){
							this.list = this.list.concat(deleteHid(res.data.data.list,this.Item.deleteHid));
							this.page++
							uni.hideLoading();
						}else{
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
						function deleteHid(list, ids){
							return list.filter(item => {
								const { groups } = item
								if (Array.isArray(item.groups)) {
									item.groups = deleteHid(groups, ids)
								}
								return !ids.includes(item.hname)
							})
						}
						
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
.block-hashtag{
	padding: 0 25rpx 0 0;
	display: flex;
	flex-wrap: wrap;
	.for{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 25rpx 0 0 25rpx;
		line-height: 28rpx;
		border: 1rpx solid $BianKuangSe;
		padding: 15rpx 20rpx;
		border-radius: 100rpx;
		background: $BeiJingSe;
		text{
			font-size: 28rpx;
		}
		.digit{
			color: $ZhanWeiSe;
			font-size: 22rpx;
			padding-left: 5rpx;
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 25rpx 0 0 25rpx;
		line-height: 28rpx;
		border: 1rpx solid $BianKuangSe;
		background: $BeiJingSe;
		padding: 15rpx 20rpx;
		border-radius: 100rpx;
		text{
			font-size: 28rpx;
		}
	}
}
</style>